import React,{useCallback} from 'react'
import left from '@/assets/images/left.png'
import Navbar from '@/components/Navbar/Navbar'
import {useHistory} from 'react-router-dom'
import { Tabs, WhiteSpace, Badge } from 'antd-mobile';
import { useSelector,useDispatch } from 'react-redux'
import {CartWrapper} from './styledMy'
export default function Mybuy() {
    const history =useHistory()
    const cart =useSelector(state=>state.getIn(['cart','cart']))
    console.log(cart);
    const renderContent = tab =>
    (
    <CartWrapper>
      <ul>
        {
          cart.map((item,index)=>{
            return(
              <li className='car' key={index}>
                <div className='cart'>
                  <img src={item.logoUrl} alt="" />
                </div>
                <div>
                    <p>{item.title}</p>
                    <p> <span>{item.size}码</span> 数量X1</p>
                </div>
              </li>
            )
          })
        }
      </ul>
      
    </CartWrapper>
      )
      const tabs = [
        { title: '带付款' },
        { title: '带发货' },
        { title: '待收货' },
        { title: '全部订单' },
     
      ];

    const handleClick = useCallback(
        () => {
            history.goBack()
        }
    )
    return (
        <div>
            <Navbar
            title='我的购买'
            icon={left}
            color='#F8F8F8'
            onClick={handleClick}
        >
        </Navbar>
        <div>
        <WhiteSpace />
        <Tabs tabs={tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={4} />}>
          {renderContent}
        </Tabs>
        <WhiteSpace />
      </div>
        </div>
    )
}
